@import "vwstyle";

body,
html {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

header {
    height: vw(90);
    box-sizing: border-box;
    border-bottom: 1px solid #dbdbdb;
    display: flex;
    justify-content: space-between;
    align-items: center;

    article {
        width: vw(560);
        height: vw(58);
        background: #ebebeb;
        text-align: center;
        margin: 0 vw(32) 0 vw(20);
        color: #999;
        line-height: vw(58);
        border-radius: 10px;
    }

    a {
        display: flex;
        align-items: center;

        i {
            display: inline-block;
            vertical-align: middle;
            margin-right: vw(10);
        }

        font-size: vw(30);
        color: #0084ff;
        padding-right: vw(30);
    }
}

nav {
    height: vw(71);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dbdbdb;

    .active {
        border-bottom: 2px solid #444444;

        a {
            color: #1a1a1a;
        }
    }

    li {
        line-height: vw(71);
        height: 100%;
        flex: 1;

        a {
            display: block;
            height: 100%;
            text-align: center;
            color: #999;
            font-weight: bold;
        }
    }
}

main {
    flex: 1;
    overflow: auto;
    background: #ebebeb;

    section {
        margin-top: vw(20);
        background: white;

        figure {
            border-bottom: 1px solid #d3d3d3;
            min-height: vw(188);
            max-height: vw(288);
            display: flex;
            // align-items: ;
            justify-content: center;
            flex-direction: column;
            position: relative;
            &:nth-child(-n+3) figcaption span{
                color: #f1403c;
            }
        
            figcaption{
                padding-top: vw(30);
                margin-bottom: vw(28);
                font-size: vw(32);
                color: #1a1a1a;
                font-weight: bold;
                width:vw(440);
                padding-left: vw(80);
                // margin-left: vw(80);
                span{
                    display: inline-block;
                    width: vw(80);
                    text-align: center;
                    color: #c2a469;
                    position: absolute;
                    left: 0;
                }
            }
            p{
                padding-left: vw(80);
                color: #a3a3a3;
                font-size: vw(24);
                padding-bottom: vw(24);
            }
            img{
                border-radius: 4px;
                width: vw(210);
                height: vw(140);
                position: absolute;
                top: 50%;
                right: vw(20);
                transform: translateY(-50%);
            }
        }

    }
}

footer {
    height: vw(96);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #d3d3d3;

    // box-sizing: border-box;
    // border-top: 1px solid #666;
    p {
        a {

            i {
                font-size: vw(40) !important;
            }

            color:#999;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .active {
            color: #0084ff;
        }
    }
}